/*
 *useEffect与useLayoutEffect（同步执行副作用）区别
 调用时机不同，useLayoutEffect和原理的componentDidMount&componentDidUpdate一致，在react完成Dom更新
 后马上同步调用的代码，会阻塞页面渲染，而useEffect是会在整个页面渲染才会调用的代码
 如果要做纯dom操作 用useLayoutEffect  否则 用useEffect
 比如如果想避免页面抖动的话，可以把需要操作dom的代码放在useLayoutEffect里面（放在useEffect里面修改dom很有可能出现），
 在这里面做点dom操作，这些dom修改会和react做出的更改一起被一次性渲染到屏幕上，只有一次回流、重绘的代价
 */
 import React, { Component,useLayoutEffect } from 'react'

 export default class App extends Component {
     state = {
         isCreated:true
     }
     render() {
         return (
             <div>
                 <button onClick={()=>{
                     this.setState({
                         isCreated:!this.state.isCreated
                     })
                 }}>click</button>
                 {/* {this.state.isCreated?<Child/>:""} */}
                 {this.state.isCreated && <Child/>}
             </div>
         )
     }
 }

  function Child (){
     //
     useLayoutEffect(() => {
         window.onresize = ()=>{
             console.log("resize")
         }
 
         var timer = setInterval(()=>{
             console.log("111")
         },1000)
 
 
       return ()=>{
             console.log('组件销毁')
 
             window.onresize = null
             clearInterval(timer)
         }  
     }, [])
 
     return <div>
         child
     </div>
 }
  